<template>
	<MyPage title="方案详情" :isback="true" :isborder="true">
		<view slot="right"><u-button type="error" size="mini" @click="pictureBtnClick">生成海报</u-button></view>
		<view slot="gBody">
			<view class="my-content">
				<!-- 头部合计信息 -->
				<u-table align="left">
					<u-tr>
						<u-th width="25%">已选方案</u-th>
						<u-td width="75%">
							<text v-for="(item,index) in zizi" :key="index">{{index+1}}、{{item.title}}</text>
						</u-td>
					</u-tr>
					<u-tr>
						<u-th width="25%">资产</u-th>
						<u-td width="75%">{{zc?zc:0}}</u-td>
					</u-tr>
					<u-tr>
						<u-th width="25%">设备</u-th>
						<u-td width="75%">{{sb}}</u-td>
					</u-tr>
					<u-tr>
						<u-th width="25%">厂房</u-th>
						<u-td width="75%">{{cf}}</u-td>
					</u-tr>
					<u-tr>
						<u-th width="25%">委托费</u-th>
						<u-td width="75%">
							<view class="" style="display: flex;align-items: center;">
								<input type="text" v-model="wtf" style="
								border: solid 1rpx #F4A460;
								width: 60px;padding: 2px;
								border-radius: 5px;height: 20px;
								color: #F4A460;
								">
								<text class="red" style="margin-left: 5px;">元</text>
							</view>
						</u-td>
					</u-tr>
					<u-tr>
						<u-th width="25%">单月价格</u-th>
						<u-td width="75%"><text class="red">{{danjia}} 元/月</text></u-td>
					</u-tr>
					<u-tr>
						<u-th width="25%">时长</u-th>
						<u-td width="75%"><text class="green">{{cycle}} 月</text></u-td>
					</u-tr>
					<u-tr>
						<u-th width="25%">
							<view class="flex" style="align-items: center;">
								<text>社保</text>
								<view class="flex" style="margin-left: 10rpx;"
									:class="is_shebao_money?'banmi_kuang_xz':'banmi_kuang'"
									@click="on_xuznze('is_shebao_money')">
									<text v-if="is_shebao_money" style="color: #F4A460;">✔</text>
								</view>
							</view>
						</u-th>
						<u-td width="75%">
							<view class="flex" style="align-items: center;">
								<text class="red" style="margin-left: 5px;">社保费用</text>
								<input class="m-l-2" type="number" v-model="shebao_month" style="
								border: solid 1rpx #F4A460;
								width: 60px;padding: 2px;
								border-radius: 5px;height: 20px;
								color: #F4A460;
								">
								<text class="red" style="margin-left: 5px;">*{{cycle}}月</text>
							<!-- 	<text class="red" style="margin-left: 5px;">*</text>

								<input class="m-l-2" type="text" v-model="shebao_num" style="
								border: solid 1rpx #F4A460;
								width: 30px;padding: 2px;
								border-radius: 5px;height: 20px;
								color: #F4A460;
								">
								<text class="red" style="margin-left: 5px;">人</text> -->
							</view>
							<view class="flex" style="align-items: center;padding-top: 10rpx;"> 
								
									<text class="red" style="margin-left: 5px;">社保人数</text>
								<input class="m-l-2" type="number" v-model="shebao_num" style="
								border: solid 1rpx #F4A460;
								width: 60px;padding: 2px;
								border-radius: 5px;height: 20px;
								color: #F4A460;
								">
								<text class="red" style="margin-left: 5px;">*人</text>
							 
							</view>
						</u-td>
					</u-tr>
					<u-tr>
						<u-th width="25%">
							<view class="flex " style="align-items: center;">
								<text>业绩</text>
								<view class="flex" style="margin-left: 10rpx;"
									:class="is_performance?'banmi_kuang_xz':'banmi_kuang'"
									@click="on_xuznze('is_performance')">
									<text v-if="is_performance" style="color: #F4A460;">✔</text>
								</view>
							</view>

						</u-th>
						<u-td width="75%">
							<view class="" style="display: flex;align-items: center;">
								<text class="red" style="margin-left: 5px;">业绩</text>
								<input class="m-l-2" type="number" v-model="performance_money" style="
								border: solid 1rpx #F4A460;
								width: 60px;padding: 2px;
								border-radius: 5px;height: 20px;
								color: #F4A460;
								">
								<text class="red" style="margin-left: 6px;">*数量</text>
								<input class="m-l-2" type="number" v-model="performance_num" style="
								border: solid 1rpx #F4A460;
								width: 59px;padding: 2px;
								border-radius: 5px;height: 20px;
								color: #F4A460;
								">

							</view>
						</u-td>
					</u-tr>
					<u-tr>
						<u-th width="25%">
							<view class="flex " style="align-items: center;">
								<view class="" style="flex: 1;">
									<text>自定义</text>
								</view>
								<view class="flex" :class="is_extend?'banmi_kuang_xz':'banmi_kuang'"
									@click="on_xuznze('is_extend')">
									<text v-if="is_extend" style="color: #F4A460;">✔</text>
								</view>
							</view>


						</u-th>

						<u-td width="75%">
							<view class="" style="align-items: center;">
								<view class="flex a-c">
									<text class="red" style="margin-left: 5px;">名称</text>
									<input class="m-l-2" type="text" v-model="extend_name" style="
									border: solid 1rpx #F4A460;
									width: 60px;padding: 2px;
									border-radius: 5px;height: 20px;
									color: #F4A460;
									">
									<text class="red" style="margin-left: 12px;">内容</text>
									<input class="m-l-2" type="text" v-model="extend_content" style="
									border: solid 1rpx #F4A460;
									width: 60px;padding: 2px;
									border-radius: 5px;height: 20px;
									color: #F4A460;
									">
								</view>
								<view class="flex a-c " style="padding-top: 5px;">
									<text class="red" style="margin-left: 5px;">费用</text>
									<input class="m-l-2" type="number" v-model="extend_money" style="
									border: solid 1rpx #F4A460;
									width: 60px;padding: 2px;
									border-radius: 5px;height: 20px;
									color: #F4A460;
									">
									<text class="red" style="margin-left: 5px;">*数量</text>
									<input class="m-l-2" type="number" v-model="extend_num" style="
									border: solid 1rpx #F4A460;
									width: 60px;padding: 2px;
									border-radius: 5px;height: 20px;
									color: #F4A460;
									">
								</view>
							</view>
						</u-td>
					</u-tr>
					<u-tr>
						<u-th width="25%">总价</u-th>
						<u-td width="75%"><text class="red font34">{{zongjia}} 元</text></u-td>
					</u-tr>
				</u-table>

				<!-- 详细列表展示 -->
				<view class="content-title">
					<u-divider color="#333" half-width="200" fontSize="30">报价明细</u-divider>
				</view>
				<view class="margin-top30" v-for="(item,index) in lists" :key="index">
					<u-table align="left">
						<u-tr>
							<u-th width="100%" class="bold">{{item.name}}</u-th>
						</u-tr>
						<u-tr>
							<u-th width="40%">工种</u-th>
							<u-th width="20%">单价</u-th>
							<u-th width="20%">数量</u-th>
							<u-th width="20%">总价</u-th>
						</u-tr>
						<u-tr v-for="(child,childIndex) in item.gongzhong" :key="childIndex" style="height:30px;">
							<u-td width="40%">{{child.gongzhongname}}</u-td>
							<u-td width="20%" style="border: solid 1rpx #F4A460;border-radius: 5px; ">
								<!-- 	{{child.price?child.price:0}} -->
								<input type="text" v-model="child.price" style="
							 
							width: 50px; 
							border-radius: 5px; 
							color: #F4A460;
							">
							</u-td>

							<u-td width="20%">{{child.num}}</u-td>
							<u-td width="20%">{{child.total?child.total:0}}</u-td>
						</u-tr>


					</u-table>
				</view>
			</view>
		</view>
	</MyPage>
</template>

<script>
	import mixin from "@/libs/mixin.js";

	import gongzhong from "./gongzhong.vue"
	import {
		arraylist,
		getEndContent
	} from '@/api/compute.js'
	import computeFun from "@/libs/compute.js";
	export default {
		components: {
			gongzhong,
		},
		mixins: [mixin],

		data() {
			return {
				cycle: '',
				ids: '',
				industryId: '',
				myCityObj: {},
				extend_num: '',
				shebao_money: '',
				extend_money: '',
				extend_content: '',
				extend_name: '',

				performance_num: '',
				lists: [],
				zizi: [],
				shichang: 0,
				danjia: 0,
				zongjia: 0,
				zc: '',
				cf: '',
				sb: '',
				wtf: 0,
				shebao_month: '',

				shijian: 0,
				//city:0,
				completeLoad: false,
				allData: [],
				okObj: [],
				is_shebao_money: false,
				is_performance: false,
				is_extend: false,
				performance_money: '',
				shebao_num: 0,
				performance_zong: 0,
				extend_zong: 0
			}
		},

		watch: {
			wtf: {
				handler(newsval, oldval) {
					newsval = parseInt(newsval);
					var val = this.lists;
					var total = 0;
					for (var i = 0; i < val.length; i++) {
						var gongzhong = val[i]['gongzhong'];
						total += this.total_num(gongzhong);
					}
					this.zongjia = newsval + total + this.extend_zong + +this.performance_zong

				},
				deep: true
			},
			performance_money: {
				handler(newsval, oldval) {
					if (this.is_performance && this.performance_num > 0) {
						var val = this.lists;
						var total = 0;
						for (var i = 0; i < val.length; i++) {
							var gongzhong = val[i]['gongzhong'];
							total += this.total_num(gongzhong);
						}
						var wtf = parseInt(this.wtf);
						this.performance_zong = newsval * this.performance_num;
						this.zongjia = wtf + total + this.performance_zong + this.extend_zong
					}
				},
				deep: true
			},
			performance_num: {
				handler(newsval, oldval) {
					if (this.is_performance && this.performance_money > 0) {
						var total = 0;
						var val = this.lists;
						for (var i = 0; i < val.length; i++) {
							var gongzhong = val[i]['gongzhong'];
							total += this.total_num(gongzhong);
						}
						var wtf = parseInt(this.wtf);
						this.performance_zong = newsval * this.performance_money
						this.zongjia = wtf + total + this.performance_zong + this.extend_zong
					}
				},
				deep: true
			},
			extend_money: {
				handler(newsval, oldval) {
					if (this.is_extend && this.extend_num > 0) {
						var total = 0;
						var val = this.lists;
						for (var i = 0; i < val.length; i++) {
							var gongzhong = val[i]['gongzhong'];
							total += this.total_num(gongzhong);
						}
						var wtf = parseInt(this.wtf);
						this.extend_zong = newsval * this.extend_num;
						this.zongjia = wtf + total + this.extend_zong + this.performance_zong
					}
				},
				deep: true
			},
			extend_num: {
				handler(newsval, oldval) {
					if (this.is_extend && this.extend_money > 0) {
						var total = 0;
						var val = this.lists;
						for (var i = 0; i < val.length; i++) {
							var gongzhong = val[i]['gongzhong'];
							total += this.total_num(gongzhong);
						}
						var wtf = parseInt(this.wtf);
						this.extend_zong = newsval * this.extend_money;
						this.zongjia = wtf + total + this.extend_zong + this.performance_zong
					}
				},
				deep: true
			},
			lists: {
				handler(val, oldval) {
					var total = 0;
					for (var i = 0; i < val.length; i++) {
						var gongzhong = val[i]['gongzhong'];
						total += this.total_num(gongzhong);
					}
					var wtf = parseInt(this.wtf);
					this.zongjia = wtf + total + this.extend_zong + +this.performance_zong

				},
				deep: true
			},
		},
		onLoad(option) {
			//获取路由参数
			this.ids = option.ids ? option.ids : '21,24,25';
			this.cycle = option.cycle ? option.cycle : '2';
			this.cityKey = option.cityKey ? option.cityKey : '1';
			this.log_id = option.log_id ? option.log_id : 0;
			this.industryId = option.industryId;
			this.getArraylist();
		},
		methods: {
			on_xuznze(name) {
				if (name == 'is_shebao_money') {
					this.is_shebao_money = !this.is_shebao_money
				} else if (name == 'is_performance') {

					this.is_performance = !this.is_performance
					var val = this.lists;
					var total = 0;
					for (var i = 0; i < val.length; i++) {
						var gongzhong = val[i]['gongzhong'];
						total += this.total_num(gongzhong);
					}
					var wtf = parseInt(this.wtf);

					if (this.is_performance && this.performance_num > 0 && this.performance_money > 0) {
						this.performance_zong = this.performance_num * this.performance_money
						this.zongjia = wtf + total + this.performance_zong + this.extend_zong
					} else {
						this.performance_zong = 0;
						this.zongjia = wtf + total + this.performance_zong + this.extend_zong
					}


				} else {
					this.is_extend = !this.is_extend
					var val = this.lists;
					var total = 0;
					for (var i = 0; i < val.length; i++) {
						var gongzhong = val[i]['gongzhong'];
						total += this.total_num(gongzhong);
					}
					var wtf = parseInt(this.wtf);
					if (this.is_extend && this.extend_money > 0 && this.extend_num > 0) {
						this.extend_zong = this.extend_money * this.extend_num
						this.zongjia = wtf + total + this.performance_zong + this.extend_zong
					} else {
						this.extend_zong = 0;
						this.zongjia = wtf + total + this.performance_zong + this.extend_zong
					}
				}

			},
			total_num(gongzhong) {

				var total = 0;
				for (var i = 0; i < gongzhong.length; i++) {
					gongzhong[i]['total'] = gongzhong[i]['price'] * gongzhong[i]['num']
					total += gongzhong[i]['total']
				}
				return total;

			},

			// 右上角生成图片
			pictureBtnClick() {
				if (this.is_shebao_money) {
					if (!this.shebao_month) {
						uni.showToast({
							title:'请输入社保费用',
							icon:'error'
						})
						return
					}  
					if (!this.shebao_num) {
						uni.showToast({
							title:'请输入社保人数',
							icon:'error'
						})
						return
					}  
				}  
				if (this.is_performance) {
					if (!this.performance_money) {
						uni.showToast({
							title:'请输入业绩金额',
							icon:'error'
						})
						return
					}  
					if (!this.performance_num) {
						uni.showToast({
							title:'请输入业绩数量',
							icon:'error'
						})
						return
					}  
				}  
				if (this.is_extend) {
					if (!this.extend_name) {
						uni.showToast({
							title:'请输入自定义名称',
							icon:'error'
						})
						return
					}  
					if (!this.extend_content) {
						uni.showToast({
							title:'请输入自定义内容',
							icon:'error'
						})
						return
					}  
					if (!this.extend_money || this.extend_money==0 ) {
						uni.showToast({
							title:'请输入自定义费用',
							icon:'error'
						})
						return
					}  
					if (!this.extend_num || this.extend_num==0) {
						uni.showToast({
							title:'请输入自定义数量',
							icon:'error'
						})
						return
					}  
				} 
				 uni.setStorage({
				 	key: 'lists',
				 	data:  this.lists
				 });
				 uni.setStorage({
				 	key: 'zizi',
				 	data:  this.zizi
				 });
				 uni.setStorage({
				 	key: 'okObj',
				 	data:  this.okObj
				 });
				
			 

				this.$utils.navigateTo('/compute/confirmation', {
					cycle: this.cycle,
					ids: this.ids,
					cityKey: this.cityKey,
					zongjia: this.zongjia,
					wtf: this.wtf,
					is_shebao_money: this.is_shebao_money,
					shebao_month: this.shebao_month,
					shebao_num: this.shebao_num,
					is_performance: this.is_performance,
					performance_money: this.performance_money,
					performance_num: this.performance_num,
					is_extend: this.is_extend,
					extend_name: this.extend_name,
					extend_content: this.extend_content,
					extend_money: this.extend_money,
					extend_num: this.extend_num,
				});
			},
			// 获取计算后的内容
			getArraylist() {
				arraylist({
					ids: this.ids,
					shijian: this.cycle,
					city: this.cityKey
				}).then(res => {
					if (res && res.length) {
						this.allData = res;
						this.makeResult();
					} else {
						uni.showToast({
							title: res.msg || '获取资质失败，请返回重试！',
							icon: 'none'
						})
					}
				}).catch(err => {
					uni.showToast({
						title: err.msg || '获取资质失败，请返回重试！',
						icon: 'none'
					})
				});
			},
			for_she_num(gongzhong) {
				var num = 0;
				for (var i = 0; i < gongzhong.length; i++) {
					num += Number(gongzhong[i]['num'])
				}
				return num;
			},
			// 合并计算过程
			makeResult() {
				console.log("this.allData: " + JSON.stringify(this.allData));
				let okObj = computeFun(this.allData,this.industryId);
				//传到上面去得到最后结果
				uni.showLoading({
					title: '正在云计算，请稍后！'
				});
				this.okObj = okObj;

				getEndContent({
					ids: this.ids,
					shijian: this.cycle,
					city: this.cityKey,
					data: okObj,
					token: this.$store.state.app.token,
					log_id: this.log_id
				}).then(res => {
					uni.hideLoading();
					this.lists = res.list;
					var num = 0;
					for (var i = 0; i < this.lists.length; i++) {
						num += this.for_she_num(this.lists[i]['gongzhong'])
					}
					this.shebao_num = num;
					this.zizi = res.zizi;
					this.shebao_month = this.zizi[0]['shebao_month'];
					this.performance_money = this.zizi[0]['performance_money'];
					this.performance_num = this.zizi[0]['performance_num'];
					this.extend_name = this.zizi[0]['extend_name'];
					this.extend_content = this.zizi[0]['extend_content'];
					this.extend_money = this.zizi[0]['extend_money'];
					this.extend_num  = this.zizi[0]['extend_num'];
					

					//this.shichang = this.shijian;
					this.danjia = res.danjia;
					this.zongjia = res.zongjia;
					this.zc = res.zc;
					this.cf = res.cf;
					this.sb = res.sb;
					this.wtf = res.wtf
				}).catch(err => {
					uni.hideLoading();
					uni.showToast({
						title: err.msg,
						icon: 'none'
					})
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.banmi_kuang_xz {
		width: 50rpx;
		height: 50rpx;
		border: solid 3rpx #F4A460;
		border-radius: 10rpx;
		justify-content: center;
		align-items: center;
	}

	.banmi_kuang {
		width: 50rpx;
		height: 50rpx;
		border: solid 3rpx #D3D3D3;
		border-radius: 10rpx;
		justify-content: center;
		align-items: center;
	}

	.my-content {
		.u-tr {

			.u-th,
			.u-td {
				padding-left: 20rpx !important;
				box-sizing: border-box;
			}

			.u-th {
				font-weight: normal !important;
			}

			.bold {
				font-weight: bold !important;
			}
		}

		.content-title {
			margin-top: 40rpx;
		}
	}
</style>